<script setup lang="ts">
import { reactive, ref } from 'vue'
import leftManual from './components/LManual/leftManual.vue'
import rightManual from "./components/RManual/rightManual.vue"
import {Search} from '@element-plus/icons-vue'
const props = defineProps({
  ip: {
    type: String,
    required: true,
    default: () => { }
  }
})
const inValue = ref('1.172.179.239')
const mapRef = ref()
const leftRef = ref()
const GetMessage = (value: any) => {
  leftRef.value.DataUpdate(value)
}
// 搜索
const Gosearch = () => {
  mapRef.value.show(inValue.value)
}
</script>

<template>
  <div class="jm-container flex">
    <!-- 左侧边显示栏 -->
    <div class="left jm-bg-color">
      <div>
        <jm-input class="search" v-model="inValue" style="width: 240px" :suffix-icon="Search" @keyup.enter="Gosearch" placeholder="1.172.179.239:500" />
      </div>
      <leftManual ref="leftRef"></leftManual>
    </div>
    <!-- 右侧力向导图 -->
    <div class="right jm-container jm-bg-color">
      <rightManual ref="mapRef" :ip="props.ip" @getMessage="GetMessage" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.flex {
  display: flex;

  .left {
    width: 20rem;
    padding: 0.625rem 1.25rem;
    margin-right: 1rem;

    cursor: pointer;
  }

  .right {
    flex: 1;
    height: 100%;
  }
}
</style>
